import React, {useState, useEffect} from 'react'
import marked from 'marked'
import hljs from "highlight.js";
import '../static/css/AddArticle.css'
import {Row, Col, message, Input, Select, Button, DatePicker, Spin} from 'antd'
import axios from 'axios'
import servicePath from '../config/apiUrl'

const {Option} = Select
const {TextArea} = Input

function AddArticle(props) {
    const [articleId, setArticleId] = useState(0)  // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
    const [articleTitle, setArticleTitle] = useState('')   //文章标题
    const [articleContent, setArticleContent] = useState('')  //markdown的编辑内容
    const [markdownContent, setMarkdownContent] = useState('预览内容') //html内容
    const [introduceMd, setintroduceMd] = useState()            //简介的markdown内容
    const [introduceHtml, setintroduceHtml] = useState('等待编辑') //简介的html内容
    const [showDate, setShowDate] = useState()   //发布日期
    const [typeInfo, setTypeInfo] = useState([]) // 文章类别信息
    const [selectedType, setSelectType] = useState('选择类型') //选择的文章类别

    useEffect(() => {
        getTypeInfo()
        let tmpId = props.match.params.id
        if (tmpId) {
            setArticleId(tmpId)
            getArticleById(tmpId)
        }
    }, [])


    const renderer = new marked.Renderer();
    marked.setOptions({

        renderer: renderer,
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }

    });

    const changeContent = (e) => {
        setArticleContent(e.target.value)
        let html = marked(e.target.value)
        setMarkdownContent(html)
    }

    const changeIntroduce = (e) => {
        setintroduceMd(e.target.value)
        let html = marked(e.target.value)
        setintroduceHtml(html)
    }

    const getTypeInfo = () => {
        axios({
            method: 'get',
            url: servicePath.getTypeInfo,
            header: {'Access-Control-Allow-Origin': '*'},
            withCredentials: true
        }).then(
            res => {
                if (res.data.data === '没有登录') {
                    localStorage.removeItem('openId')
                    props.history.push('/')
                } else {
                    setTypeInfo(res.data.data)
                }
            }
        )
    }

    const selectTypeHandler = (value) => {
        setSelectType(value)
    }
    // 验证是否为空
    const saveArticle = () => {
        if (!selectedType) {
            message.error('必须选择文章类别')
            return false
        } else if (!articleTitle) {
            message.error('文章名称不能为空')
            return false
        } else if (!articleContent) {
            message.error('文章内容不能为空')
            return false
        } else if (!introduceMd) {
            message.error('简介不能为空')
            return false
        } else if (!showDate) {
            message.error('发布日期不能为空')
            return false
        }

        let dataProps = {}
        dataProps.type_id = selectedType
        dataProps.title = articleTitle
        dataProps.article_content = articleContent
        dataProps.introduce = introduceMd

        let datetext = showDate.replace('-', '/')
        dataProps.addTime = (new Date(datetext).getTime()) / 1000

        if (articleId === 0) {
            dataProps.view_count = Math.ceil(Math.random() * 100) + 1000

            axios({
                method: 'post',
                url: servicePath.addArticle,
                data: dataProps,
                withCredentials: true
            }).then(
                res => {
                    setArticleId(res.data.insertId)
                    if (res.data.isSuccess) {
                        message.success('文章保存成功')
                    } else {
                        message.error('文章保存失败')
                    }
                }
            )
        } else {
            dataProps.id = articleId
            axios({
                method: 'post',
                url: servicePath.updateArticle,
                header: {'Access-Control-Allow-Origin': '*'},
                data: dataProps,
                withCredentials: true
            }).then(
                res => {
                    if (res.data.isSuccess) {
                        message.success('文章保存成功')
                    } else {
                        message.error('保存失败')
                    }
                }
            )
        }
    }

    const getArticleById = (id) => {
        axios(servicePath.getArticleById + id, {
            withCredentials: true,
            header: {'Access-Control-Allow-Orign': '*'}
        }).then(
            res => {
                let articleInfo = res.data.data[0]
                setArticleTitle(articleInfo.title)
                setArticleContent(articleInfo.article_content)
                let html = marked(articleInfo.article_content)
                setMarkdownContent(html)
                setintroduceMd(articleInfo.introduce)
                let tmpInt = marked(articleInfo.introduce)
                setintroduceHtml(tmpInt)
                setSelectType(articleInfo.typeId)
                setShowDate(articleInfo.addTime)
            }
        )
    }
    return (
        <div>
            <Row gutter={5}>
                <Col span={18}>
                    <Row gutter={10}>
                        <Col span={20}>
                            <Input
                                value={articleTitle}
                                placeholder='博客标题'
                                size='large'
                                onChange={
                                    e => {
                                        setArticleTitle(e.target.value)
                                    }
                                }
                            />
                        </Col>
                        <Col span={4}>
                            &nbsp;
                            <Select defaultValue={selectedType} size='large' onChange={selectTypeHandler}>
                                {
                                    typeInfo.map((item, index) => {
                                        return (<Option key={index} value={item.Id}>{item.typeName}</Option>)
                                    })
                                }

                            </Select>
                        </Col>
                    </Row>
                    <br/>
                    <Row gutter={10}>
                        <Col span={12}>
                            <TextArea
                                value={articleContent}
                                className="markdown-content"
                                rows={35}
                                onChange={changeContent}
                                onPressEnter={changeContent}
                                placeholder="文章内容"
                            />
                        </Col>
                        <Col span={12}>
                            <div className='show-html'
                                 dangerouslySetInnerHTML={{__html: markdownContent}}
                            >

                            </div>
                        </Col>
                    </Row>
                </Col>
                <Col span={6}>
                    <Row>
                        <Col span={24}>
                            <Button size='large'>暂存文章</Button>&nbsp;
                            <Button size='large' type='primary' onClick={saveArticle}>发布文章</Button>
                            <br/>
                        </Col>
                        <Col span={24}>
                            <br/>
                            <TextArea
                                value={introduceMd}
                                onChange={changeIntroduce}
                                onPressEnter={changeIntroduce}
                                rows={5}
                                placeholder='文章简介'
                            />
                            <br/><br/>

                            <div className='introduce-html'
                                 dangerouslySetInnerHTML={{__html: '文章简介' + introduceHtml}}
                            >

                            </div>
                        </Col>
                        <Col span={12}>
                            <div className='date-select'>
                                <DatePicker
                                    placeholder='发布日期'
                                    size='large'
                                    onChange={(date, dateString) => setShowDate(dateString)}
                                />
                            </div>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    )
}

export default AddArticle